<template>
    <view :style="dynamicStyles">
        <view class="gap" :style="getGapStyle">
        </view>
    </view>
</template>

<script lang="ts" setup>
import { computed } from 'vue';

interface ShowData {
    commonStyle?: any;
    height: number;//高度
    gapBgColorDirection: string;
    gapBgStartColor: string;
    gapBgEndColor: string;
}
const props = defineProps<{
    showData: ShowData;
}>();
const getGapStyle = computed(() => {
    return {
        height: `${props.showData.height}px`,
        background: `linear-gradient(${props.showData.gapBgColorDirection || 'to right'},
				${props.showData.gapBgStartColor || ''},
				${props.showData.gapBgEndColor || props.showData.gapBgStartColor || ''})`
    }
})
const dynamicStyles = computed(() => {
    const commonStyle = props.showData.commonStyle;
    return {
        marginTop: `${commonStyle.styleTopMargin}px`,
        marginLeft: `${commonStyle.styleLeftMargin}px`,
        marginRight: `${commonStyle.styleRightMargin}px`,
        marginBottom: `${commonStyle.styleBottomMargin}px`,
        paddingTop: `${commonStyle.styleTopPadding}px`,
        paddingLeft: `${commonStyle.styleLeftPadding}px`,
        paddingRight: `${commonStyle.styleRightPadding}px`,
        paddingBottom: `${commonStyle.styleBottomPadding}px`,
        borderTopLeftRadius: `${commonStyle.styleLtRadius}px`,
        borderTopRightRadius: `${commonStyle.styleRtRadius}px`,
        borderBottomLeftRadius: `${commonStyle.styleLbRadius}px`,
        borderBottomRightRadius: `${commonStyle.styleRbRadius}px`,
        ...(commonStyle.bgPicUrl && {
            background: `url(${commonStyle.bgPicUrl})`,
            backgroundRepeat: 'no-repeat',
            backgroundPosition: 'center',
            backgroundSize: '100% 100%'
        }),
        ...(!commonStyle.bgPicUrl && {
            background: `linear-gradient(${commonStyle.bgColorDirection || 'to right'}, 
				${commonStyle.bgStartColor || ''}, 
				${commonStyle.bgEndColor || commonStyle.bgStartColor || ''})`
        }),
    };
});
</script>

<style scoped lang="scss"></style>
